import styles from "./RecommendView.module.css";
import {Box, Button, ImageList, ImageListItem} from "@mui/material";
import DGCardView from "../../../components/DGCardView.tsx";
import {LauncherRouteSoftware, LauncherRouteSoftwareType} from "../../../LauncherRouteSoftware.tsx";
import DGListView from "../../../components/DGListView.tsx";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import DGFooterView from "../../../components/DGFooterView/DGFooterView.tsx";
import DGFadeView from "../../../components/DGFadeView.tsx";
import {useNavigate} from "react-router-dom";

const RecommendView = () => {
    // 跳转路由
    const router = useNavigate();

    return (<DGFadeView time={1000} className={styles.RecommendView}>
        <Box className={styles.Content}>
            <ImageList variant="masonry" className={styles.ImageList}>

                {/* 推荐栏目（单独） */}
                <ImageListItem>
                    <DGCardView title="热榜推荐" item small>
                        <DGListView>
                            {/* 遍历路由应用列表 */}
                            {LauncherRouteSoftware.slice(0, 3).map((item, index) => (
                                <DGListViewItem
                                    key={index} avatar={item['icon']} title={item['name']} subText={item['desc']}>
                                    <Button>前往</Button>
                                </DGListViewItem>))}
                        </DGListView>
                    </DGCardView>
                </ImageListItem>

                {/* 分类排行 */}
                {LauncherRouteSoftwareType.map((v1, i1) => {
                    if (LauncherRouteSoftware.filter(v => v['type'] === v1['id']).length > 0) {
                        return (<ImageListItem key={i1}>
                            <DGCardView
                                action={<Button
                                    size="small" onClick={() => router("item-" + i1, {replace: true})}>
                                    查看更多
                                </Button>}
                                title={v1['title'] + "排行"} item small>
                                {/* 遍历路由应用列表 */}
                                <DGListView>{LauncherRouteSoftware.filter(v => v['type'] === v1['id'])
                                    .slice(0, 3).map((item, index) => (
                                        <DGListViewItem
                                            key={index} avatar={item['icon']} title={item['name']}
                                            subText={item['desc']}>
                                            <Button>前往</Button>
                                        </DGListViewItem>
                                    ))
                                }</DGListView>
                            </DGCardView>
                        </ImageListItem>);
                    }
                })}
            </ImageList>
        </Box>
        {/* 底部信息 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default RecommendView;